<template>
  <div class="page-container">
    <div class="in-container content" v-loading="loading">
      <div class="btn-tab">
        <el-button type="primary" @click="save" :loading="saveBtnLoading">
          保存
        </el-button>
        <el-button type="danger"  v-if="!isNew" @click="deleteData">
          删除
        </el-button>
      </div>
      <el-form
        :model="formData"
        :rules="formRules"
        label-suffix="："
        size="small"
        label-width="100px"
        ref="form"
      >
        <div class="middle">
          <div class="title">基础信息</div>
          <div class="content">
            <el-row :gutter="8">
              <el-col :span="6">
                <el-form-item label="客户编号" prop="entCode">
                  <el-input v-model.trim="formData.entCode"> </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="客户简称" prop="entName">
                  <el-input v-model.trim="formData.entName"> </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="客户全称" prop="entFullname">
                  <el-input v-model.trim="formData.entFullname"> </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="电话" prop="linktel">
                  <el-input v-model.trim="formData.linktel"> </el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="8">
              <el-col :span="6">
                <el-form-item label="传真" prop="fax">
                  <el-input v-model.trim="formData.fax"> </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="网址" prop="webUrl">
                  <el-input v-model.trim="formData.webUrl"> </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="账龄天数" prop="agingDays">
                  <selectDown
                    v-model:modelData="formData.agingDays"
                    placeholder="请输入后搜索"
                    urlType="dict"
                    urlQueryData="sys_bill_day"
                  >
                  </selectDown>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="业务员" prop="salesId">
                  <selectDown
                    v-model:modelData="formData.salesId"
                    placeholder="请输入后搜索"
                    urlType="man"
                    :option="initOption.ywyOption"
                  >
                  </selectDown>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="8">
              <el-col :span="6">
                <el-form-item label="备注" prop="memo">
                  <el-input v-model="formData.memo" type="textarea"> </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="详细地址" prop="address">
                  <el-input
                    v-model="formData.address"
                    placeholder="请填写地址,最多不超过200字。"
                    type="textarea"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="类别">
                  <el-checkbox
                    v-model="checkAll"
                    :indeterminate="isIndeterminate"
                    @change="handleCheckAllChange"
                    >全选</el-checkbox
                  >
                  <el-checkbox-group
                    v-model="formData.cltTypeList"
                    @change="handleCheckedTypeChange"
                  >
                    <el-checkbox
                      v-for="item in typeOptions"
                      :key="item.value"
                      :label="item.value"
                      >{{ item.label }}</el-checkbox
                    >
                  </el-checkbox-group>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </div>
        <div class="tab">
          <el-tabs>
            <el-tab-pane label="客户属性">
              <enterpriseDetailCustomer
                v-model:detailData="formData"
                :option="initOption.khhxOption"
              ></enterpriseDetailCustomer>
            </el-tab-pane>
            <el-tab-pane label="银行信息">
              <enterpriseDetailBankNew
                v-model:detailData="formData"
              ></enterpriseDetailBankNew>
            </el-tab-pane>
            <el-tab-pane label="联系人信息" v-if="!isNew">
              <enterpriseDetailLink
                :detailData="formData"
              ></enterpriseDetailLink>
            </el-tab-pane>
            <el-tab-pane label="其他信息">
              <enterpriseDetailOther
                v-model:detailData="formData"
              ></enterpriseDetailOther>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-form>
      <enterpriseDetailBank v-model:show="bankDialogData.show">
      </enterpriseDetailBank>
    </div>
  </div>
</template>

<script>
import { defineComponent } from "vue";
import selectDown from "./components/selectDown.vue";
import enterpriseDetailCustomer from "./components/enterpriseDetailCustomer.vue";
import enterpriseDetailLink from "./components/enterpriseDetailLink.vue";
import enterpriseDetailOther from "./components/enterpriseDetailOther.vue";
import enterpriseDetailBank from "./components/enterpriseDetailBank.vue";
import enterpriseDetailBankNew from "./components/enterpriseDetailBankNew.vue";
import { ElMessageBox } from 'element-plus'
export default defineComponent({
  components: {
    selectDown,
    enterpriseDetailCustomer,
    enterpriseDetailLink,
    enterpriseDetailBank,
    enterpriseDetailOther,
    enterpriseDetailBankNew,
  },
  data() {
    return {
      isNew: true,
      formData: {
        id: null,
        entCode: null,
        entName: null,
        entFullname: null,
        linktel: null,
        fax: null,
        webUrl: null,
        agingDays: null,
        salesId: null,
        cltType: null,
        companyNature: null,
        cltSource: null,
        tradelaneId: null,
        postCode: null,
        bussinessCode: null,
        englishName: null,
        firstContact: null,
        englishAddress: null,
        address: null,
        cargoMemo: null,
        portMemo: null,
        memo: null,
        companyId: null,
        cltTypeList: [],
      },
      formRules: {
        entCode: [
          {
            required: true,
            message: "请输入客户编号",
            trigger: "change",
          },
        ],
        entName: [
          {
            required: true,
            message: "请输入客户简称",
            trigger: "blur",
          },
        ],
        entFullname: [
          {
            required: true,
            message: "请输入客户全称",
            trigger: "blur",
          },
        ],
      },
      initOption: {
        ywyOption: [],
        khhxOption: [],
      },

      checkAll: false,
      isIndeterminate: true,
      typeOptions: [],
      loading: false,
      saveBtnLoading: false,
      bankDialogData: {
        show: false,
      },
    };
  },
  methods: {
    async getTypeOption() {
      const typeOption = await this.$http
        .get("/api/dictDetail/query", {
          PageIndex: 1,
          PageSize: 10,
          DictName: "TRADER_TYPE",
        })
        .then((res) => {
          this.typeOptions = res.content.map((t) => {
            return {
              label: t.label,
              value: t.id,
            };
          });
        });
      return typeOption;
    },
    getAllOption() {
      if (this.formData.salesId) {
        this.$http
          .get("/api/user/query", {
            PageIndex: 1,
            PageSize: 10,
            Id: this.formData.salesId,
          })
          .then((res) => {
            this.initOption.ywyOption = res.content.map((item) => {
              return {
                id: item.id,
                value: item.id,
                label: item.nickName,
                selectLabel: item.nickName,
              };
            });
          });
      }
      if (this.formData.tradelaneId) {
        this.$http
          .get("/api/base/shipline/query", {
            PageIndex: 1,
            PageSize: 10,
            Id: this.formData.tradelaneId,
          })
          .then((res) => {
            this.initOption.khhxOption = res.content.map((item) => {
              return {
                id: item.id,
                value: item.id,
                label: item.shiplineName,
                selectLabel: item.shiplineName,
              };
            });
          });
      }
    },
    initData() {
      const typeOption = this.getTypeOption();
      const data = this.$http
        .get("/api/buenterprise/queryById", {
          Id: this.$route.query.entId,
        })
        .then((res) => {
          if (res.status) {
            this.formData = res.data;
          }
        });
      this.loading = true;
      Promise.allSettled([typeOption, data])
        .then((res) => {
          this.handleCheckedTypeChange(this.formData.cltTypeList);
          this.getAllOption();
        })
        .finally(() => (this.loading = false));
    },
    initNewData() {
      this.loading = true;
      this.getTypeOption()
        .then((res) => {
          this.formData.cltTypeList.push(this.$route.query.entType);
        })
        .finally(() => (this.loading = false));
    },
    handleCheckAllChange(val) {
      this.formData.cltTypeList = val
        ? this.typeOptions.map((t) => {
            return t.value;
          })
        : [];
      this.isIndeterminate = false;
    },
    handleCheckedTypeChange(value) {
      const checkedCount = value.length;
      this.checkAll = checkedCount === this.typeOptions.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.typeOptions.length;
    },

    save() {
      this.$refs.form.validate((v) => {
        if (v) {
          if (this.formData.cltTypeList.length != 0) {
            this.saveBtnLoading = true;
            this.$http
              .post("/api/buenterprise/create", this.formData)
              .then((res) => {
                if (res.status) {
                  this.$message.success(res.message);
                  this.$router.closeAndRefreshTab(
                    "/enterprise/enterpriseManager"
                  );
                } else {
                  this.$message.error(res.message);
                }
              })
              .finally(() => (this.saveBtnLoading = false));
          } else {
            this.$message.warning("类别至少选择一个");
          }
        } else {
          console.log(v);
        }
      });
    },
    openBankDialog() {
      this.bankDialogData.show = true;
    },
    deleteData(){
      ElMessageBox.confirm('将删除全部与该数据的关系', '警告', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(()=>{
        this.$http.post('/api/buenterprise/delete',{
          idArray:[this.formData.id]
        }).then(res=>{
          if (res.status) {
            this.$message.success(res.message);
            this.$router.closeAndRefreshTab(
              "/enterprise/enterpriseManager"
            );
          } else {
            this.$message.error(res.message);
          }
        })
      })
    }
  },
  mounted() {
    if (this.$route.query != {}) {
      this.$store.dispatch("tab/modifyTabTitle", {
        path: this.$route.fullPath,
        title: this.$route.query.title,
      });
      this.isNew = this.$route.query.title == "新增客商";
      if (this.isNew) {
        this.initNewData();
      } else {
        this.initData();
      }
    }
  },
});
</script>

<style lang="scss" scoped>
.content {
  padding: 0;
  .btn-tab {
    padding: 8px;
    border-bottom: 1px solid #e4e7ed;
  }
  .middle {
    padding: 8px;
    border-bottom: 1px solid #e4e7ed;
    .title {
      font-size: 14px;
      margin-bottom: 8px;
    }
  }
  .tab {
    height: calc(100% - 222px);
    padding: 0 8px 8px 8px;
  }
  :deep(.el-form) {
    height: calc(100% - 49px);
    .el-form-item__label {
      font-size: 12px;
    }
  }
  :deep(.el-select) {
    width: 100%;
  }
  :deep(.el-checkbox) {
    margin-right: 8px;
    .el-checkbox__label {
      font-size: 12px;
    }
  }
  :deep(.el-tabs) {
    height: 100%;
    .el-tabs__content {
      height: calc(100% - 55px);
    }
    .el-tab-pane {
      height: 100%;
    }
  }
}
</style>
